<template>
  <div>
    <!-- 按钮 -->
    <MainHeader></MainHeader>

    <!-- 表格 -->
    <div class="table">
      <el-table ref="multipleTable" :data="tableData" style="width: auto">
        <el-table-column type="selection" />
        <el-table-column label="文件名" width="auto">
          <template slot-scope="scope">
            <div style="display: flex;">
              <i class="el-icon-document icon-table" v-if="scope.row.type=='DOCUMENT_FILE'"></i>
              <i class="el-icon-video-camera-solid icon-table" v-if="scope.row.type=='VIDEO_FILE'"></i>
              <i class="el-icon-collection icon-table" v-if="scope.row.type=='OTHER_FILE'"></i>

              <el-image class="icon-table" style="width: 50px; height: 50px" :src="http+scope.row.virtualPath"
                fit="fill" v-if="scope.row.type == 'IMAGE_FILE'">
              </el-image>

              <a title="点击预览" :href="scope.row.virtualPath != ''?http + scope.row.virtualPath:'previewErr'"
                target="_blank" style="text-decoration: none;align-self: center;color: #000;">{{scope.row.fileName}}</a>

            </div>
          </template>
        </el-table-column>

        <el-table-column label="所属文件夹" width="150px">
          <template slot-scope="scope">
            <i class="el-icon-folder" style="margin-right: 10px;"></i>
            <span :title="scope.row.folderName">{{ scope.row.folderName.length
              >6?scope.row.folderName.substring(0,6):scope.row.folderName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="修改时间" width="150px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>

        </el-table-column>
        <el-table-column prop="size" label="大小" width="100px"></el-table-column>

        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!-- <el-button @click="preview(scope.row)" type="text" size="small">查看</el-button> -->
            <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
            <el-button type="text" size="small" @click="download(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 文件下载 -->
    <DownloadFile :ids="ids" :downloadOpen="downloadOpen"></DownloadFile>
    <!-- 文件修改 -->
    <UpdateFile :updateOpen="updateOpen" :updateData="updateData"></UpdateFile>

  </div>
</template>

<script>
  import apiUrl from '@/api/url'
  import link from '@/api/Link'
  import router from "@/router"
  import sizeTostr from '@/util/FileSizeUtil'
  import DownloadFile from '@/components/DownLoadFile.vue'
  import UpdateFile from '@/components/UpdateFile.vue'
  import MainHeader from '@/components/MainHeader.vue'
  export default {
    name: 'AllFile',
    components: {
      DownloadFile,
      UpdateFile,
      MainHeader,
    },
    data () {
      return {
        http: '',
        pageSize: 5,
        pageSizes: [5, 10, 20, 30],
        currentPage: 1,
        total: 0,
        tableData: [],
        folders: [],
        fileList: [],
        keyWord: '',
        ids: [],
        downloadOpen: false,
        updateOpen: false,
        updateData: {},
        folderIds: [],
      }
    },
    methods: {
      //初始化
      init () {
        this.http = apiUrl.baseUrl
        let data = {
          fileName: this.keyWord,
          folderIds: this.folderIds,
          type: 1,
          page: {
            pageSize: this.pageSize,
            pageNo: this.currentPage,
          },
        }
        link(apiUrl.baseUrl + '/sys/file/findByPage/v1', 'POST', JSON.stringify(data), null).then((ok) => {
          if (ok.data.code === 0) {
            let i = 0;
            for (i; i < ok.data.data.files.length; i++) {
              ok.data.data.files[i].size = sizeTostr(ok.data.data.files[i].size)
            }
            this.tableData = ok.data.data.files
            this.total = ok.data.data.total
          } else {
            this.$message.error('数据请求失败：' + ok.data.msg)
          }
        })

      },

      //修改按钮
      update (row) {
        this.updateData = JSON.parse(JSON.stringify(row))
        this.updateOpen = !this.updateOpen
      },
      //下载按钮
      download (row) {
        let ids = []
        ids.push(row.id)
        this.ids = ids
        this.downloadOpen = !this.downloadOpen
      },
      //分页监控
      handleCurrentChange (val) {
        this.currentPage = val
        this.init()
      },
      //分页监控
      handleSizeChange (val) {
        this.pageSize = val;
        this.init()
      },
    },
    mounted () {
      this.init()
    },
    watch: {

    }
  }
</script>

<style scoped>
  .table {
    margin: 10px;
    /* width: 90%;   */
    /* border: 1px solid slategray; */
  }

  .icon-table {
    margin-right: 10px;
    display: flex;
    align-self: center;
  }
</style>